在Axios中,拦截器提供了一种机制来在请求或响应被处理之前拦截它们。你可以使用拦截器来添加认证头、处理错误、显示加载动画等。在处理错误时,你可以使用响应拦截器来捕获并处理从服务器返回的错误。
以下是一个示例,展示了如何在Axios中设置拦截器来处理错误:
安装Axios(如果尚未安装):
npm install axios
设置Axios实例和拦截器:
import axios from 'axios'; // 创建一个Axios实例 const axiosInstance = axios.create({ baseURL: 'https://api.example.com', // 替换为你的API基础URL timeout: 10000, // 请求超时时间 }); // 请求拦截器 axiosInstance.interceptors.request.use( config => { // 在发送请求之前做些什么,例如添加认证头 // config.headers['Authorization'] = 'Bearer ' + token; return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); } ); // 响应拦截器 axiosInstance.interceptors.response.use( response => { // 对响应数据做点什么 return response; }, error => { // 对响应错误做点什么 if (error.response) { // 服务器返回了一个状态码,并且状态码触发了错误 switch (error.response.status) { case 400: console.error('Bad Request'); break; case 401: console.error('Unauthorized'); // 可以在这里处理未授权,例如重定向到登录页面 break; case 403: console.error('Forbidden'); break; case 404: console.error('Not Found'); break; case 500: console.error('Internal Server Error'); break; default: console.error('An unknown error occurred:', error.response.status); } } else if (error.request) { // 请求已经发出,但没有收到响应 console.error('No response received:', error.request); } else { // 在设置请求时发生了错误 console.error('Error in setting up request:', error.message); } // 返回一个Promise.reject()以便后续的错误处理 return Promise.reject(error); } ); // 导出Axios实例 export default axiosInstance;
在你的应用中使用Axios实例:
import axiosInstance from './path/to/your/axiosInstance'; axiosInstance.get('/some-endpoint') .then(response => { console.log('Response:', response.data); }) .catch(error => { console.error('Error caught in the calling code:', error); });
在上面的示例中,我们创建了一个Axios实例,并添加了请求和响应拦截器。在响应拦截器中,我们检查错误对象的状态码,并根据不同的状态码执行不同的错误处理逻辑。这样,你可以集中管理错误处理逻辑,而无需在每个请求中都重复编写相同的错误处理代码。
原文出处:
内容源于AI仅供参考,请勿使用于商业用途。如若转载请注明原文及出处。
出处地址:http://www.07sucai.com/tech/259.html
版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。